<template>
    <div class="index">
        <el-button @click="backToChapter">返回章节页面</el-button>    
    </div>
    <div class="file-list-page p-4">
    <h2 class="text-2xl font-bold mb-4">章节文件列表</h2>
    <div v-if="records.length">
      <div v-for="file in records" :key="file.id" class="file-card mb-6 p-4 border rounded-lg bg-white shadow">
        <el-divider></el-divider>
        <h3 class="text-xl font-semibold mb-2">{{ file.name }}</h3>
        <p class="text-sm text-gray-500 mb-1">上传时间：{{ file.createTime }}</p>
        <p class="mb-2">描述：{{ file.description }}</p>
        <p class="mb-4">类型：{{ file.type }}</p>
        <div class="file-display">
          <!-- 视频文件 -->
          <video
            v-if="file.type.startsWith('video')"
            :src="file.path"
            controls
            class="w-full max-w-xl"
          ></video>
           <!-- 图片文件 -->
          <img
            v-else-if="file.type.startsWith('image')"
            :src="file.path"
            alt="file.name"
            class="w-full max-w-xl"
          />
          <!-- PDF 文件 -->
          <!-- <iframe http-equiv="X-Frame-Options" content="ALLOW-FROM"
            v-else-if="file.type === 'application/pdf'"
            :src="file.path"
            type="application/pdf"
            class="w-full h-96"
          ></iframe> -->
          <!-- Word 文档 -->
          <!-- <iframe
            v-else-if="isWord(file.type)"
            :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(file.path)}`"
            width="100%"
            height="600px"
            frameborder="0"
          ></iframe> -->
          <!-- 其他类型，提供下载链接 -->
          <div v-else>
            <a :href="file.path" target="_blank" class="text-blue-600 underline">下载文件</a>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="text-gray-500">暂无文件</div>
  </div>
</template>

<script setup>
import router from '@/router';
import { ref, onMounted } from 'vue'
import { useCookies } from 'vue3-cookies'
import axios from 'axios'

const { cookies } = useCookies()
const records = ref([])


function backToChapter() {
    router.push({ path: '/teacher/courseManage/courseInfoManage'})
}

function isWord(type) {
  return [
    'application/msword',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  ].includes(type)
}

onMounted(async () => {
  const chapterId = cookies.get('chapterId')
  if (!chapterId) {
    console.error('未找到 chapterId')
    return
  }
  try {
    const res = await axios.get('/api/course/file/page', {
      params: { chapter: chapterId }
    })
    if (res.data?.code === 200 && res.data.data?.records) {
      records.value = res.data.data.records
    } else {
      console.warn('接口返回异常', res.data)
    }
  } catch (err) {
    console.error('获取文件列表失败', err)
  }
})

</script>

<style scoped>
.index {
    margin-top: 20px;
}
.file-list-page {
  /* background: #f5f7fa; */
  min-height: 100vh;
}
.file-card video,
.file-card embed,
.file-card iframe {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}
.file-card img {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  max-width: 60%;
}
</style>